<template>
    <div>
        <div class="chat-wrapper">
            <div class="chat-list-section">
                <div class="chat-list">
                    <chatItem v-for="item in list" :key="item.key" :showPopKey="showPopKey" :item="item" @onEdit="onEdit" @onDelete="onDelete" @showKeyChange="keyChange"/>
                </div>
                <div class="chat-list-tools" v-show="list && list.length > 0">
                    <button title="清空消息" class="tools-btn clear-btn" @click="clear">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g id="brush-3-line">
                            <path id="Vector" d="M6.6665 16.6638V12.4972H8.33317V16.6638H15.8332V10.8305H4.1665V16.6638H6.6665ZM3.33317 9.16384H16.6665V6.66382H11.6665V3.33048H8.33317V6.66382H3.33317V9.16384ZM2.49984 17.4972V10.8305H1.6665V5.83049C1.6665 5.37025 2.0396 4.99715 2.49984 4.99715H6.6665V2.49715C6.6665 2.03692 7.0396 1.66382 7.49984 1.66382H12.4998C12.9601 1.66382 13.3332 2.03692 13.3332 2.49715V4.99715H17.4998C17.9601 4.99715 18.3332 5.37025 18.3332 5.83049V10.8305H17.4998V17.4972C17.4998 17.9574 17.1268 18.3305 16.6665 18.3305H3.33317C2.87294 18.3305 2.49984 17.9574 2.49984 17.4972Z" fill="currentColor" fill-opacity="0.8"></path>
                        </g>
                        </svg>
                    </button>
                    <button title="滑动至底部" class="tools-btn" @click="down">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"><path d="M36 14L24 26L12 14"></path><path d="M12 34H36"></path></g></svg>
                    </button>
                </div>
            </div>
            <ChatInputArea @onMessage="onMessage" ref="ChatInputArea" @updateList="updateList" :list="list"></ChatInputArea>
        </div>
    </div>
</template>
<script>
import ChatInputArea from './ChatInputArea.vue';
import ChatItem from './ChatItem.vue'
export default {
    props: {
        list: {
            default: ()=> {[]}
        }
    },
    name: 'GuaChatUi',
    data() {
        return {
            showPopKey: '',
        }
    },
    components: {
        ChatInputArea,
        ChatItem
    },
    methods: {
        keyChange(key) {
            this.showPopKey = key;
        },
        onMessage(message, role, loading) {
            this.$emit('updateList', message, 'joint', role, loading);
        },
        updateList(message, role) {
            this.$emit('updateList', message, 'add' ,role);
        },
        clear() {
            this.$emit('updateList', '', 'clear');
        },
        down() {
            this.$nextTick(()=> {
                var element = document.getElementsByClassName('chat-list')[0];
                element && element.scrollTo(0, element.scrollHeight);
            })
        },
        onEdit(content){
            this.$refs.ChatInputArea.textareaInner = content;
        },
        onDelete(item) {
            this.$emit('updateList', item, 'delete');
        },
    },
}
</script>
<style scoped>
    .chat-wrapper {
        display: flex;
        box-sizing: border-box;
        padding: var(--gua-chat-padding);
        flex-direction: column;
        height: 100%;
    }
    .chat-list-section {
        flex: 1 1 auto;
        min-height: var(--gua-chat-list-min-height);
        position: relative;
    }
    .chat-list {
        height: 100%;
        overflow-y: auto;
    }
    .chat-list-tools {
        position: absolute;
        bottom: 0;
        right: calc(25px + calc(10px * 2 / 3));
        display: flex;
        flex-direction: column;
        gap: calc(10px / 2)
    }
    .tools-btn {
        display: inline-flex;
        border-radius: calc(16px * 0.75);
        border: none;
        padding: calc(10px * 0.75);
        cursor: pointer;
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 1px 4px 0 rgba(25, 34, 52, 0.05)
    }
</style>